<script>
  import dayjs from 'dayjs';

  export default {
    methods: {
      dayjs,
      scrolltolower() {
        this.$emit('scrolltolower');
      },
    },
    props: {
      height: {
        type: String,
        default: '',
      },
      ancestorLoveList: {
        type: Object,
        default() {
          return {};
        },
      },
    },
  };
</script>

<template>
  <view class="wh_750" :style="{
    height: height
  }">
    <view class="wh_750 flex flex-column align-center">
      <view class="hW_30"></view>
      <scroll-view scroll-y class="bg_FFFFFF wh_702 flex flex-column align-center"
                   style="border-radius: 8rpx;"
                   :style="{
                     maxHeight: `calc(${height} - 100rpx)`
                   }"
                   @scrolltolower="scrolltolower"
      >
        <view class="wh_702 ss-m-t-35 ss-m-b-35 flex flex-column align-center">
          <view class="wh_640 flex flex-row align-center justify-between"
                :class="index != 0 ? 'ss-m-t-15' : ''"
                v-for="(item, index) in ancestorLoveList.list" :key="index">
            <view class="wh_170 fs_24 fw_500 color_292929 title">{{ item.title }}</view>
            <view class="wh_300 fs_24 fw_500 color_292929">
              {{ dayjs(item.add_time * 1000).format('YYYY年MM月DD日 HH:mm:ss') }}
            </view>
            <view class="wh_125 fs_24 fw_500 color_292929">献花 +{{ item.num }}</view>
          </view>
        </view>
      </scroll-view>
      <view class="hW_30"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>